<div id='calendar'></div>
<br />
<form class="" method="post">
	<input type="hidden" name="user_id" id="user_id" value="<?php echo $user_item->id; ?>">
	<div class="form-group">
		<label for="inputTitle" class="control-label">Title: </label>
		<input type="text" class="form-control" name="inputTitle" id="inputTitle" required placeholder="Tour du lịch">
	</div>
	<div class="form-group">
		<label for="inputDateStart" class="control-label">Start: </label>
		<input type="text" class="form-control datepicker" name="inputDateStart" required id="inputDateStart" placeholder="Ngày đi">
	</div>

	<div class="form-group">
		<label for="inputDateEnd" class="control-label">End: </label>
		<input type="text" class="form-control datepicker" name="inputDateEnd" required id="inputDateEnd" placeholder="Ngày về">
	</div>		
	<input type="submit" name="addCalendar" id="addCalendar" class="btn btn-default" value="Thêm">
</form>
<script>
	$(function () {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		$(".datepicker").datepicker({});

		$('#calendar').fullCalendar({
			header: {
				left: 'title',
				right: 'prev,next today'
			},
			editable: true,
			eventLimit: true, 
			events: [
			<?php 
			if(!is_null($calendar_item)) {
				foreach ($calendar_item as $item_c) 
				{ 
					?>
					{
						title: '<?php echo $item_c->name; ?>',
						start: '<?php echo $item_c->date_start; ?>',
						end: '<?php echo $item_c->date_end; ?>'
					},
					<?php 
				}
			} ?>
			],
			eventRender: function (event, element) {
				var tooltip = event.title;
				$(element).attr("data-original-title", tooltip)
				$(element).tooltip({ container: "body"})
			}
		});
	});

	$("#addCalendar").click(function(){
		var user_id = $(user_id).val();
		var name = $(inputTitle).val();
		var date_start = $(inputDateStart).val();
		var date_end = $(inputDateEnd).val();
		var AJAX_POST_URL = _base_url + "thanh-vien/add-tour";

		$.ajax({
			url: AJAX_POST_URL,
			type: "POST",
			data: {
				user_id: user_id,
				name: name,
				date_start: date_start,
				date_end: date_end
			},
			success: function(html)
			{	
				$('#calendarMember').html(html);
				location.reload();
			}
		});	

		return false;
	});
</script>